
<template>
  <d2-container>
    <div style="display: inline-block;background-color: white;height:300px;width: 70%;position: relative;overflow: hidden;float: left" >
<!--       今日总览 报名数据
      营收数据
      上课书
      我的班级，课程信息 -->
      <span style="width: 45%;height: 140px;position: relative;display: inline-block;margin-top: 15px;margin-left:3.3%;position: relative" v-if="admin || theroot">
          <div  style="height:40px;position: absolute;top:0px"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3px' >_</span>
            今日数据
            <div style='margin-top: 20px'><span style="color:#98A0A7">新增课程订单数量：</span>{{adminData.course}}</div>
            <div style='margin-top: 10px'><span style="color:#98A0A7">新增教材订单数量：</span>{{adminData.product}}</div>
        </div>

      </span>
      <span style="width: 45%;height: 140px;position: relative;display: inline-block;margin-top: 15px;margin-left:3.3%">
        <div  style="height:40px;position: absolute;top:0px"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3px' v-if="finance || theroot">_</span>
            今日营收
            <div style='margin-top: 20px'><span style="color:#98A0A7">课程营收：</span>{{financeData.course}}元</div>
            <div style='margin-top: 10px'><span style="color:#98A0A7">教材营收：</span>{{financeData.product}}元</div>
        </div>
      </span>

      <span style="width: 100%;height: 140px;position: relative;display: inline-block;margin-top: -10px;margin-left:3.3%">
        <div  style="height:40px;position: absolute;top:0px"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3px'>_</span>
            我的班级
            <span v-if='myClass.length == 0' style="display: block;margin-top: 20px;margin-left: 15px">
              暂无班级
            </span>
            <el-row v-for="(item,key) in myClass" :key="key">
              <div style="margin-top: 10px">

                <span style="width: 100px;display: inline-block;" @click='goClass(key)'>
                <span style="color:#98A0A7;">班级：</span> {{item.name}}
                </span>

                <span style="width: 150px;display: inline-block;">
                <span style="color:#98A0A7;">授课老师：</span> {{item.teacher == undefined ? '暂无' : item.teacher.name}}
                </span>
                <span style="width: 150px;display: inline-block;">
                <span style="color:#98A0A7;">教务老师：</span> {{item.registrar == undefined ? '暂无' : item.registrar.name}}
                </span>
                <span style="width: 150px;display: inline-block;">
                <span style="color:#98A0A7;">教室:</span> {{item.classroom == undefined ? '暂无' : item.classroom.name}}
                </span>
              </div>
            </el-row>
        </div>
      </span>
    </div>
    <div style="display: inline-block;background-color: white;height:300px;width: 28%;margin-left:20px;position: relative;" >
      <div  style="height:40px;position: absolute;top:10px;left:10px;z-index: 100"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3' >_</span>
            续课提醒
        </div>

        <el-table  style='margin-top:10px;z-index: 10' :height=290 :data=courseReminder >
          <el-table-column  label="">
            <template slot-scope='scope'>
              <span @click="gotostudent(scope.$index)" style="color:#FF0000" v-if='(scope.row.amount <=8)'>{{scope.row.message}}</span>
              <span @click="gotostudent(scope.$index)" style="color:#FFA200" v-else-if='(scope.row.amount <=12 )'>{{scope.row.message}}</span>
              <span @click="gotostudent(scope.$index)" style="color:#0008ff" v-else-if='(scope.row.amount <=24 )'>{{scope.row.message}}</span>
              <el-button type='mini' style='display: block;' @click='confirmNotif(scope.$index)'>不再显示</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <div style="display: inline-block;background-color: white;height:300px;width: 70%;position: relative;" :style="{'width':(inout? '70%': '100%'),'marginTop':(inout? '20px': '20px')}">
      <div  style="height:40px;position: absolute;top:10px;left:10px;z-index: 100"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3'>_</span>
            我的收入本周
        </div>

        <div style="margin-bottom: 20px" >
      <div id="course_income_2" :style="{width: '100%', height: '260px',color:'#ccc',marginTop:'40px'}">

        </div>
      </div>
    </div>
    <div style="display: inline-block;background-color: white;height:300px;width: 28%;margin-left:20px;position: relative;margin-top: 20px" v-if="inout || theroot">
      <div  style="height:40px;position: absolute;top:10px;left:10px;z-index: 100"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3'>_</span>
            进销存消息
        </div>

        <el-table  style='margin-top:10px;z-index: 10' :height=290 :data=inoutNotif >
          <el-table-column  label="">
            <template slot-scope='scope'>
              <span @click="gotoinout(scope.$index)" >{{scope.row.school == school ? scope.row.notifSchool : scope.row.notifToSchool}}

              </span>

            </template>
          </el-table-column>
        </el-table>
    </div>
     <div style="display: block;background-color: white;height:300px;width: 40%;position: relative;margin-top: 20px" v-if="schoolMaster || (headquarter && theroot)">
      <div  style="height:40px;position: absolute;top:10px;left:10px;z-index: 100"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3'>_</span>
            学区续费提醒
        </div>

        <el-table  style='margin-top:10px;z-index: 10' :height=300 :data=schoolExpireNotif >
          <el-table-column  label="">
            <template slot-scope='scope'>
              <span @click="gotoSchool(scope.row)" >"{{scope.row.name}}"还剩{{scope.row.days}}天过期，请及时联系续费 </span>
            </template>
          </el-table-column>
        </el-table>
    </div>
  </d2-container>
</template>

<script>
import request from "@/plugin/axios";
import { constants } from 'crypto';
    import {mapState} from "vuex";

export default {
  data() {
    return {
      schoolList: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      schoolListSearch: {
        name: "",
        type: 2
      },
      adminData : {'course':0,'product':0},
      financeData : {'course':0,'product':0},
      myClass : [],
      courseReminder : [],
      schoolExpireNotif : [],
      inoutNotif : [],
      myIncome : [],
      plot : {data:[]},
      table :{},
      headquarter : false,
      theroot : false,
      finance : false,
      admin : false,
      inout:false,
      schoolMaster : false
    };
  },
  computed: {
            ...mapState('d2admin/user', ['info']),
        },
  methods: {
                drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart6 = this.$echarts.init(document.getElementById('course_income_2'))

      // 绘制图表
      myChart6.setOption({
        title: {
          text: ''
        },
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data:this.plot.name
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : this.plot.date,

          }
        ],
        yAxis : [
          {
            type : 'value',
            axisLabel:{
              formatter:`{value}元`
            }
          }
        ],
        series :this.plot.data
      })

    },




    formatDate(date) {
      var date = new Date(date);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return [year, month, day].map(this.formatNumber).join("-");
    },
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },
    getTodayFinanceData(){
      request({
        url: "/data/getTodayFinanceData",
        method: "post",
        data :{school:this.school}
      }).then(res => {
        if (res.code == 200){
          if (res.data.course.length > 0){
             this.financeData.course = res.data.course[0].total - res.data.course[0].discount
          }
          if (res.data.product.length > 0){
             this.financeData.product = res.data.product[0].total - res.data.product[0].discount
          }
      }
      })
    },
    getTodayAdminData(){
      request({
        url: "/data/getTodayAdminData",
        method: "post",
        data :{school:this.school}
      }).then(res => {
        if (res.code == 200){
          this.adminData = res.data
        }
      })
    },
    getInoutNotif(){
      request({
        url: "/school/getInoutNotif",
        method: "post",
        data :{school:this.school}
      }).then(res => {
        console.log(res,'inout')
        if (res.code == 200){
          for (var i = 0 ; i < res.data.length ;i++){
            console.log(res.data[i].notifSchool,res.data[i].notifToSchool)
          }
          this.inoutNotif = res.data
        }
      })
    },
    getSchoolExpireNotification(){
      request({
        url: "/school/getSchoolExpireNotification",
        method: "post",
        data :{school:this.school}
      }).then(res => {
        console.log(res)

        if (res.code == 200){
          this.schoolExpireNotif = res.data
        }
      })
    },
    getMyClass(){
      if (this.staff == undefined){
        return false
      }
      request({
        url: "/class/getMyClass",
        method: "post",
        data :{school:this.school,staff:this.staff}
      }).then(res => {
        if (res.code == 200){
          this.myClass = res.data
        }
      })
    },
    confirmNotif(index){
      request({
        url: "/courseOrder/confirmNotif",
        method: "post",
        data :{id:this.courseReminder[index]._id}
      }).then(res => {
        if (res.code == 200){
          this.$message('操作成功！')
          this.getMyClassReminder()
        }
      })
    },
    getMyIncome(){
      if (this.staff == undefined){
        return false
      }
      let today = new Date()
      let startDate = new Date(today.getTime() - 7 * 24 * 3600000)
      request({
        url: "/data/getSchoolTeacherIncome",
        method: "post",
        data :{school:this.school,staff:this.staff,start_time:startDate,end_time:new Date(),period:'day'}
      }).then(res => {
        this.myIncome = res.data

                        this.plot.name = []
                        for (var j = 1 ; j < res.data.columns.length ; j++){
                            this.plot.name.push(res.data.columns[j].label)
                        }
                        var bububu = []
                        for (var i = 0 ; i < res.data.data.length ; i++){
                            bububu.push(res.data.data[i])
                        }
                        bububu.sort(function(a,b){return new Date(a.date) - new Date(b.date) })
                        console.log(bububu)
                        this.plot.date = bububu.map(function(e){return e.date})
                        this.plot.data = []
                        for (var i =0 ; i < this.plot.name.length ; i++){
                            this.plot.data.push({
                                name :res.data.columns[i + 1].label,
                                type : 'bar',
                                // stack : '总量',
                                areaStyle : {},
                                data :bububu.map(function(e){return e[res.data.columns[i + 1].prop]})
                            })
                        }
                        this.drawLine()

      })
    },
    getMyClassReminder(){
      if (this.staff == undefined){
        return false
      }
      request({
        url: "/class/getMyClassReminder",
        method: "post",
        data :{school:this.school,staff:this.staff,admin:(this.admin || this.theroot)}
      }).then(res => {
        if (res.code == 200){
          this.courseReminder = res.data
        }
      })
    },
    goClass(index){
      this.$router.push('/class-detail?class_id=' + this.myClass[index]._id)
    },

    gotostudent(index){
      this.$router.push('/student-detail?id=' + this.courseReminder[index].student._id)
    },

    gotoSchool(row){
      this.$router.push('/school-detail?id=' + row.id)
    },

    gotoinout(index){
      if (this.inoutNotif[index].status == 3){
        request({
        url: "/productOrder/updateRequestNotif",
        method: "post",
        data :{id:this.inoutNotif[index]._id}
      }).then(res => {
        if (res.code == 200){
          this.$router.push('/product-request-list')
        }
      })
      }
      else{
        this.$router.push('/product-request-list')
      }
    }
  },
  created() {
    this.school = this.info.school[0]._id
     this.staff = this.info.staff == undefined ? null : this.info.staff._id
            this.staffname = this.info.staff == undefined ? '' : this.info.staff.name
    this.rights = this.info.rights.map(function(e){return e.name})
    if (this.staff == undefined){
      this.$alert('请尽快处理，以防功能无法使用','账号未连接员工')
    }
    let finance = this.rights.indexOf('财务中心') != -1
    let inout = this.rights.indexOf('进销存') != -1
    let admin = this.rights.indexOf('教务中心') != -1
    let theroot = this.rights.indexOf('root') != -1
    let themaster = this.rights.indexOf('校长') != -1
    this.schoolMaster = this.rights.indexOf('总部管理中心') != -1

    this.headquarter = this.info.school[0].headquarter == 1 || this.info.school[0].headquarter == 2

    this.theroot = theroot || themaster
    theroot = theroot || themaster
    this.finance = finance || theroot
    this.theroot = theroot || theroot
    this.admin = admin || theroot
    this.inout = inout || theroot
    if (theroot || finance){
      this.getTodayFinanceData()
    }
    if (theroot || inout){
      this.getInoutNotif()
    }
    if (admin || theroot){
      this.getTodayAdminData()
    }
    if (this.headquarter){
      if (this.schoolMaster || this.theroot){
        this.getSchoolExpireNotification()
      }
    }
    this.getMyClass()
    this.getMyIncome()
    this.getMyClassReminder()

  }
};
</script>
